<!-- <p>slider-label works!</p> -->


<!-- <button nz-button nzType="primary" (click)="open()">Open</button> -->

<!-- <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="安全设置" (nzOnClose)="close()">
  <ng-container *nzDrawerContent>
    <button nz-button nzType="primary" (click)="settingCommandConfig()">确定</button>
    <button nz-button nzType="primary" (click)="handleOff()">取消</button>
    <button nz-button nzType="primary" (click)="handleLog()">打印</button>

    <div style="padding: 20px;">
      <div class="slider-label">
        接触力{{settingConfig.contactForce}}
      </div>
      <div nz-row>
        <div nz-col nzSpan="19">
          <nz-slider [nzMin]="5" [nzMax]="settingConfig.forceLimit"
            [(ngModel)]="settingConfig.contactForce"></nz-slider>
        </div>
        <div nz-col nzSpan="5" class="unit-col">
          <nz-input-number [nzMin]="5" [nzMax]="settingConfig.forceLimit" [nzPrecision]="0"
            [(ngModel)]="settingConfig.contactForce"></nz-input-number>
          <span class="unit">N</span>
        </div>
      </div>
      <br>
      <div nz-row class="slider-label">
        稳定灵敏度{{settingConfig.sensitivity}}
      </div>
      <div nz-row class="m-t-10">
        <div nz-col nzSpan="4" class="color-white">稳定</div>
        <div nz-col nzSpan="16">
          <nz-slider [nzMin]="0" [nzMax]="100" [(ngModel)]="settingConfig.sensitivity"></nz-slider>
        </div>
        <div nz-col nzSpan="4" class="color-white">灵敏</div>
      </div>
    </div>
  </ng-container>
</nz-drawer> -->

<!-- <hr> -->
<!-- 
  上传：
  上传文件夹：nzDirectory
  上传样式：[nzListType]='text' | 'picture' | 'picture-card'
-->
<div>
  <p>请点击“上传”导入图片[支持 image/png, image/jpg, image/jpeg 格式]</p>
  <nz-upload class="box-upload" nzAction="https://test.dingsing-medical.com/api/file/upload" [nzFileList]="fileList"
    nzListType="picture" (nzChange)="handleChange($event)" [nzMultiple]="true" nzType="drag">
    <!-- <button nz-button>
      <span nz-icon nzType="upload"></span>
      Click to Upload
    </button> -->
    <span nz-icon nzType="upload"></span>
    上传
  </nz-upload>
</div>

<!-- <button (click)="xxx()">点击</button> -->
<!-- <img nz-image width="200px" height="200px" [nzSrc]="xxximg" alt="" /> -->

<hr>

<div *ngIf="fileList.length">
  <p>图片预览/编辑区域</p>
  <div nz-row [nzGutter]="[0, 16]">
    <div class="imgbox" nz-col nzSpan="8" *ngFor="let item of fileList; let i=index">
      <p class="pimgbox">
        <img nz-image height="200px" [nzSrc]="item.url || ''" alt="" />
        <img *ngIf="!item.url" nz-image width="200px" height="200px" nzSrc="error" [nzFallback]="fallback" alt="" />
      </p>
      <input class="imgname" type=" text" nz-input [(ngModel)]="item.name" placeholder="请输入" />
    </div>
  </div>
</div>
<!-- === [nzGutter]="[16, 16]" space-between space-around -->
<!-- <div nz-row [nzGutter]="[0, 16]">
  <div class="imgbox" nz-col nzSpan="8">
    <p class="pimgbox">
      <img nz-image height="200px" [nzSrc]="xxximg || ''" alt="" />
    </p>
    <input class="imgname" type=" text" nz-input [(ngModel)]="inputValue" placeholder="请输入" />
  </div>
  <div class="imgbox" nz-col nzSpan="8">
    <p class="pimgbox">
      <img nz-image height="200px" [nzSrc]="xxximg || ''" alt="" />
    </p>
    <p class="imgname">风儿孙菲菲</p>
  </div>
  <div class="imgbox" nz-col nzSpan="8">
    <img nz-image width="200px" height="200px" [nzSrc]="xxximg || ''" alt="" />
    <p class="imgname">风儿孙菲菲</p>
  </div>
  <div class="imgbox" nz-col nzSpan="8">
    <img nz-image width="200px" height="200px" [nzSrc]="xxximg || ''" alt="" />
    <p class="imgname">风儿孙菲菲</p>
  </div>
  <div class="imgbox" nz-col nzSpan="8">
    <img nz-image width="200px" height="200px" [nzSrc]="xxximg || ''" alt="" />
    <p class="imgname">风儿孙菲菲</p>
  </div>
</div> -->

<!-- <img nz-image width="200px" height="200px" nzSrc="error" [nzFallback]="fallback" alt="" /> -->